<style>
    .form-controlX{
        border:0px;
        border-bottom: 1px solid gray;
        border-radius: 0px;
        width: auto;
        box-shadow: 0px 0px 0px 0px white;
        padding-left: 10px;
        padding-bottom: 2px;
        margin-bottom: 10px;
    }
    .control-labelX{
        margin-bottom: 10px;
    }
    #centerBody{
        font-size: 12px;
        font-family: "宋体";
    }
    table {
        font-size: 12px;
        vertical-align: center;
        padding: 0px;
    }
    tr {
        border: 1px solid gainsboro;
    }
    tr th {
        text-align: center;
        border: 1px solid gainsboro;
    }
    tr td {
        text-align: center;
        align-self: center;
        padding: 2px;
    }
</style>
<!--编辑组件-->
<div id="PrePurchaseOrderInfo" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"  style=" height:100%;margin: 0px;padding: 0px;">
    <div  class="panel panel-default" style="border-radius: 0px;">
        <div  class="row rowSet"  style="padding: 0px;text-align: center;padding-top: 10px">
            <div class="col-md-12 column">
                <!--<br>-->
                <h3 style="margin: 0px"> 采购申请单 </h3>
            </div>
            <!--表单部分-->
            <div class="row rowSet">
                <div v-if="saveDao.orderNo != null">
                    <label for="orderNo" class="col-sm-1 control-labelX" style="text-align: right" >订单号:</label>
                    <div class="col-sm-3" style="text-align: left">
                        <input type="text"  v-model="saveDao.orderNo" class="form-controlX" id="orderNo" readOnly="readonly"/>
                    </div>
                </div>
                <div>
                    <label for="sumQuantity" class="col-sm-1 control-labelX" style="text-align: right" >预定总量:</label>
                    <div class="col-sm-3"  style="text-align: left">
                        <input type="text"  v-model="saveDao.sumQuantity" class="form-controlX" id="sumQuantity" readOnly="readonly"/>
                    </div>
                </div>

                <div>
                    <label for="createUser" class="col-sm-1 control-labelX" style="text-align: right" >制单人:</label>
                    <div class="col-sm-3" style="text-align: left">
                        <input type="text"  v-model="saveDao.createUser" class="form-controlX" id="createUser" readOnly="readonly"/>
                    </div>
                </div>

                <div>
                    <label for="madeUser" class="col-sm-1 control-labelX" style="text-align: right" >经办人:</label>
                    <div class="col-sm-3" style="text-align: left">
                        <input type="text"  v-model="saveDao.madeUser" class="form-controlX" id="madeUser"  readOnly="readonly"/>
                    </div>
                </div>

                <div v-if="saveDao.commitDate != null">
                    <label for="commitDate" class="col-sm-1 control-labelX" style="text-align: right" >提审时间:</label>
                    <div class="col-sm-3" style="text-align: left">
                        <input type="text"  v-model="saveDao.commitDate" class="form-controlX" id="commitDate"  readOnly="readonly"/>
                    </div>
                </div>

                <div v-if="saveDao.checkUser != null">
                    <label for="checkUser" class="col-sm-1 control-labelX" style="text-align: right" >审核人:</label>
                    <div class="col-sm-3" style="text-align: left">
                        <input type="text"  v-model="saveDao.checkUser" class="form-controlX" id="checkUser" readOnly="readonly" />
                    </div>
                </div>

                <div v-if="saveDao.checkDate != null">
                    <label for="checkDate" class="col-sm-1 control-labelX" style="text-align: right" >审核时间:</label>
                    <div class="col-sm-3" style="text-align: left">
                        <input type="text"  v-model="saveDao.checkDate" class="form-controlX" id="checkDate"  readOnly="readonly"/>
                    </div>
                </div>

                <div v-if="saveDao.checkRemark != null">
                    <label for="checkRemark" class="col-sm-1 control-labelX" style="text-align: right" >审核意见:</label>
                    <div class="col-sm-3" style="text-align: left">
                        <input type="text"  v-model="saveDao.checkRemark" class="form-controlX" id="checkRemark"  readOnly="readonly"/>
                    </div>
                </div>

                <div>
                    <label for="reason" class="col-sm-1 control-labelX" style="text-align: right" >备注:</label>
                    <div class="col-sm-6" style="text-align: left">
                        <input type="text"  v-model="saveDao.reason" class="form-controlX" id="reason" style="width: 100%" readOnly="readonly" />
                    </div>
                </div>
            </div>

            <div  class="row rowSet">
                <!--照片展示列表-->
                <table class="table table-hover table-condensed" align="center" style="margin: 0px">
                    <thead>
                    <tr>
                        <th width="10%">商品图标</th>
                        <th width="35%">商品名称</th>
                        <th width="15%">商品型号</th>
                        <th width="20%">厂商名称</th>
                        <th width="10%">预定数量</th>
                        <th width="10%">库存余量</th>
                    </tr>
                    </thead>
                </table>
            </div>

        </div>
        <div    class="panel-body row rowSet autoDiv" style="padding: 0px;">
            <!--体部分-->
            <div class="col-md-12 column" style="margin: 0px;padding: 0px;">
                <!--照片展示列表-->
                <table class="table table-hover table-condensed"   style="vertical-align: center;" >
                    <tbody>
                        <tr v-for="(item,index) in infoDto.prePurchaseItemList">
                            <!--商品图片-->
                            <td align="center" width="10%">
                                <img  :src="$ImageUrl(item.imgId,'small')"   class="img-thumbnail"  width="50px"/>
                            </td>
                            <!--商品名称-->
                            <td valign="center" width="35%">
                                {{item.goodsName}}
                            </td>
                            <!--商品型号-->
                            <td width="15%">
                                {{item.goodsModelName}}
                            </td>
                            <!--商品名称-->
                            <td  width="20%">
                                {{item.venderName}}
                            </td>
                            <td width="10%">{{item.quantity}}</td>
                            <!--库存余量-->
                            <td width="10%">{{item.nowQuantity}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
    //采用vue
    var PrePurchaseOrderInfo = new Vue({
        el: '#PrePurchaseOrderInfo',
        data: {
            //提交的url
            submitUrl: '',
            //根据id查询对象的url
            queryUrl:'',
            //返回查询页面的url
            backUrl:'',
            //根据
            initSaveColumnUrl:Vue.prototype.getUrl('/pageInit/getInitEditPageDto/PrePurchaseOrder'),
            saveDao:{},
            infoDto:{
                prePurchaseItemList:[]
            },
            initSaveColumnList:[],
            dict:{},
            isEdit : false,
            isShow : true,
            nowSelImageField:'',
        },
        methods: {
            /**初始化*/
            init:function () {
                var that = this;
                this.$send(this.initSaveColumnUrl,null,function(data){
                    console.log('init执行成功！！'+JSON.stringify(data));
                    that.initSaveColumnList = data.initSaveColumnList;
                    that.submitUrl = data.saveUrl;
                    that.queryUrl = data.queryUrl;
                    that.backUrl = data.backUrl;
                    that.dict = data.dict;
                    //加载id对应的数据
                    that.loadEditData();
                });
            },

            /**更新数据*/
            updateBalance:function() {
                var sum = 0;
                for (var i=0;i<this.infoDto.prePurchaseItemList.length ; i++){
                    var item = this.infoDto.prePurchaseItemList[i];
                    sum =  parseFloat(sum) + parseFloat(item.quantity);
                }
                this.$set(this.saveDao,'sumQuantity',sum);
            },
            /**根据id获取对应实体*/
            loadEditData:function(){
                //判断是否是修改
                if(sessionStorage.infoId != null && sessionStorage.infoId != 'null'){
                    console.log('infoId=>'+sessionStorage.infoId);
                    var that = this;
                    this.$send(this.queryUrl+sessionStorage.infoId,null,function(data){
                        console.log('loadEditData成功！！'+JSON.stringify(data));
                        that.saveDao = data.prePurchaseOrderDao;
                        that.infoDto = data;
                        that.initItemData();
                    });
                    sessionStorage.editId = null;
                }
            },
            /**根据明细表中的数据,获取对应的详细信息*/
            initItemData:function(){
                var that = this;
                //加载对应的信息
                for (var j=0;j<this.infoDto.prePurchaseItemList.length;j++) {
                    let item = this.infoDto.prePurchaseItemList[j];
                    this.$send(this.getUrl('/product/goods/find/' + item.goodsId),null,function (goodsDao) {
                        that.$set(item,'goodsName',goodsDao.name);
                        that.$set(item,'venderName',goodsDao.venderName);
                        that.$send(that.getUrl('/business/inventory/getGoodsModelInventory/' + goodsDao.id),null,function (data) {
                            item.goodsModelList = data;
                            for(var i=0;i<data.length;i++){
                                if(data[i].id = item.goodsModelId) {
                                    that.$set(item,'goodsModelName',data[i].name);
                                    that.$set(item,'nowQuantity',data[i].quantity);
                                    that.$set(item,'imgId',data[i].imgId);
                                    break;
                                }
                            }
                        });
                    });
                }
            },
        },
        /**入参方法*/
        created: function () {
            this.init();
        },

    });



</script>
